<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../../static/img/icon-Get-into@3.png" class="back-btn" @click="goBack"></image>
			<text class="header-title">{{ pageTitle }}</text>
		</view>
		
		<!-- 贡献列表 -->
		<view class="content-wrapper">
			<scroll-view 
				class="contribution-list" 
				scroll-y 
				@scrolltolower="loadMore"
				:refresher-enabled="true"
				:refresher-triggered="refreshing"
				@refresherrefresh="onRefresh"
			>
				<view class="list-container">
					<view 
						class="contribution-item" 
						v-for="(item, index) in contributionList" 
						:key="index"
					>
						<view class="item-left">
							<image 
								class="avatar" 
								:src="item.head_img ? baseUrl + item.head_img : '../../../static/img/mrtx@2x.png'"
								@error="onImageError"
							></image>
						</view>
						<view class="item-right">
							<text class="nickname">{{ item.nickname || '--' }}</text>
							<text class="phone">手机号码：{{ formatPhone(item.phone) }}</text>
							<text class="contribution">贡献金额：¥{{ item.contribution || 0 }}</text>
							<text class="date">{{ dateLabel }}：{{ item.created || '--' }}</text>
						</view>
					</view>
				</view>
				
				<!-- 加载更多提示 -->
				<view class="load-more" v-if="contributionList.length > 0">
					<view class="load-icon" :class="{ loading: isLoading }"></view>
					<text class="load-text">{{ loadMoreText }}</text>
				</view>
				
				<!-- 空状态 -->
				<view class="empty-state" v-if="contributionList.length === 0 && !isLoading">
					<text class="empty-text">暂无数据</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { teamApi } from '../../../api/index.js'
	import {
		inject
	} from 'vue'
	export default {
		data() {
			return {
				baseUrl: inject('$baseUrl'),
				serverAddress: inject('$serverAddress', ''), // 提供默认值
				roleId: 1, // 身份ID
				pageTitle: '邀请收益',
				contributionList: [],
				currentPage: 1,
				isLoading: false,
				hasMore: true,
				refreshing: false,
				baseUrl: '' // API基础URL，需要根据实际情况设置
			}
		},
		
		computed: {
			dateLabel() {
				return this.roleId === 1 ? '邀请日期' : '申请日期';
			},
			
			loadMoreText() {
				if (this.isLoading) {
					return '加载中...';
				} else if (this.hasMore) {
					return '上拉加载更多';
				} else {
					return '没有更多数据了';
				}
			}
		},
		
		onLoad(options) {
			// 获取传递过来的身份ID
			this.roleId = parseInt(options.roleId || uni.getStorageSync('juese_id') || 1);
			this.setPageTitle();
			this.loadContributionList();
		},
		
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 设置页面标题
			setPageTitle() {
				const titleMap = {
					1: '会员明细',
					2: '合伙人明细',
					3: '市运营明细',
					4: '商家明细',
					5: '合伙人(间接邀请)明细',
					6: '厂家明细',
					7: '云主明细'
				};
				this.pageTitle = titleMap[this.roleId] || '邀请收益';
			},
			
			// 格式化手机号
			formatPhone(phone) {
				if (!phone || phone.length !== 11) {
					return '--';
				}
				return phone.slice(0, 3) + "****" + phone.slice(7);
			},
			
			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '--';
				const date = new Date(timestamp * 1000);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			
			// 图片加载错误处理
			onImageError(e) {
				e.target.src = '../../../static/img/mrtx@2x.png';
			},
			
			// 下拉刷新
			async onRefresh() {
				this.refreshing = true;
				this.currentPage = 1;
				this.hasMore = true;
				await this.loadContributionList(true);
				this.refreshing = false;
			},
			
			// 加载更多
			loadMore() {
				if (!this.isLoading && this.hasMore) {
					this.currentPage++;
					this.loadContributionList();
				}
			},
			
			// 加载贡献列表
			async loadContributionList(refresh = false) {
				if (this.isLoading) return;
				
				this.isLoading = true;
				
				try {
					if (refresh) {
						uni.showNavigationBarLoading();
					}
					
					const result = await teamApi.getTeamRanking({
						state: this.roleId,
						page: this.currentPage
					});
					
					if (refresh) {
						uni.hideNavigationBarLoading();
					}
					
					this.isLoading = false;
					
					if (result.r === 0) {
						const list = result.data.list || [];
						
						// 格式化数据
						const formattedList = list.map(item => ({
							...item,
							created: this.formatTime(item.created),
							phone: item.phone || ''
						}));
						
						if (refresh || this.currentPage === 1) {
							this.contributionList = formattedList;
						} else {
							this.contributionList = [...this.contributionList, ...formattedList];
						}
						
						// 判断是否还有更多数据
						this.hasMore = list.length >= 10; // 假设每页10条数据
					} else {
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						});
					}
				} catch (error) {
					this.isLoading = false;
					if (refresh) {
						uni.hideNavigationBarLoading();
					}
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #eeeeee;
		min-height: 100vh;
	}
	
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #FF5033;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	
	.back-btn {
		width: 40rpx;
		height: 64rpx;
		margin-left: 30rpx;
	}
	
	.header-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: white;
	}
	
	.content-wrapper {
		margin-top: 88rpx;
		height: calc(100vh - 88rpx);
	}
	
	.contribution-list {
		height: 100%;
	}
	
	.list-container {
		background: white;
		margin-top: 20rpx;
	}
	
	.contribution-item {
		display: flex;
		align-items: center;
		height: 184rpx;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #e8e8e8;
		background: white;
	}
	
	.contribution-item:last-child {
		border-bottom: none;
	}
	
	.item-left {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
	}
	
	.item-right {
		width: 73%;
		height: 100%;
		padding-top: 6rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.item-right text {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #333;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.nickname {
		font-weight: bold;
		margin-bottom: 5rpx;
	}
	
	.phone, .contribution, .date {
		color: #666;
		font-size: 22rpx;
	}
	
	.contribution {
		color: #ff2e00;
	}
	
	.load-more {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		font-size: 30rpx;
		color: #999;
	}
	
	.load-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		background-image: url('../../../static/img/pull.png');
		background-size: 50rpx;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.load-icon.loading {
		animation: rotate 1s linear infinite;
	}
	
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	
	.load-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.empty-state {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>